import React, { Component } from 'react';
import './App.css';
import {connect} from "react-redux";

class App extends Component {
  constructor(props){
    super(props);
    
  }

  render() {
    console.log(this.props.todos);
    return (
      <div className="App">
        {/* 添加todo输入部分 */}
        <div className="todo_input_box">
          <div className="todo_input_box_left">
            TOLIST
          </div>
          <div className="todo_input_box_right">
          <input type="text" ref="todoInput"/>
          <button onClick={()=>{
            //获取输入框的内容
            var value = this.refs.todoInput.value;
            //为空判断
            if(value.length === 0){
              alert("添加的内容不能为空！");
              return;
            }
            //组装todo对象
            var todo = {
              context:value,
              status:"PENDDING"
            }
            this.props.addTodo({
              type:"ADDTODO",
              todo:todo
            });
          }}>添加内容</button>
          </div>
        </div>
        <div className="todo_tool_bar">
          <div>
            <button onClick={()=>{
              this.props.all({
                type:"all"
              })
            }}>全部</button>
          </div>
          <div>
            <button onClick={()=>{
              this.props.showPendding({
                type:"pendding"
              })
            }}>正在进行</button>
          </div>
          <div>
            <button onClick={()=>{
              this.props.showFinished({
                type:"fininshed"
              })
            }}>已完成</button>
          </div>
        </div>
        <div className="todo_content_container">
          {
            this.props.todos.map((element,index)=>{
              return<div key={index} 
              className="todo_item">
                <div className="todo_item_check">
                  <input type="checkbox" 
                  checked={element.status==="PENDDING"?false:true}
                  onChange={(event)=>{
                    var checked = event.target.checked;
                    this.props.changeTodoStatus({
                      type:"CHANGESTATUS",
                      todo:element,
                      checked:checked
                    })
                  }}/>
                </div>
                <div className="todo_item_content">{element.context}</div>
                <div className="todo_item_delete">
                  <button onClick={()=>{
                    this.props.deleteTodo({
                      type:"delete",
                      todo:element
                    })
                  }}>删除</button>
                </div>
              </div>
            })
          }
        </div>
      </div>
    );
  }
}

function mapStateToProps(rootReducer){
  console.log(rootReducer.todoReducer.todos)
  return{
    todos:rootReducer.todoReducer.showTodos
  }
}

function mapActionToProps(dispatch){
  return{
    addTodo:(action)=>{dispatch(action)},
    changeTodoStatus:(action)=>{dispatch(action)},
    all:(action)=>{dispatch(action)},
    showPendding:(action)=>{dispatch(action)},
    showFinished:(action)=>{dispatch(action)},
    deleteTodo:(action)=>{dispatch(action)}
  }
}
export default connect(mapStateToProps,mapActionToProps)(App);

